<template>
    <el-container>
        <!--侧边栏-->
        <el-aside :width="asideWith" style="min-height: 100vh; background-color: #001529">
            <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
                logo
            </div>
            <el-menu
                    :collapse="isCollapse"
                    router
                    style="border: none"
                    active-text-color="#fff"
                    background-color="#001529"
                    text-color="rgba(255,255,255,0.65)"
                    :default-active="$route.path"
            >
                <el-menu-item index="/">
                    <el-icon>
                        <House/>
                    </el-icon>
                    <span slot="title">系统首页</span>
                </el-menu-item>

                <el-menu-item index="element">Element页面</el-menu-item>
                <el-menu-item>系统首页</el-menu-item>
                <el-menu-item>系统首页</el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <ChatLineRound/>
                        </el-icon>
                        <span>信息管理</span>
                    </template>
                    <el-menu-item-group title="Group One">
                        <el-menu-item>用户信息</el-menu-item>
                        <el-menu-item>管理员信息</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu>
                        <template #title>item four</template>
                        <el-menu-item>item one</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>
        </el-aside>


        <el-container>
            <!-- 头部区域-->
            <template></template>

            <el-header>
                <el-icon @click="handleCollapse">
                    <Fold/>
                </el-icon>
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/user1' }">用户管理</el-breadcrumb-item>
                </el-breadcrumb>

                <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
                    <el-dropdown :hide-on-click="false">
                        <div style="display: flex; align-items: center">
                            <img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px">
                            <span>管理员</span>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人信息</el-dropdown-item>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

            </el-header>


            <!-- 主体区域-->
            <el-main>
                <div style="box-shadow: 0 0 10px rgba(0,0,0,1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
                    早安，骚年，祝你开心每一天！
                </div>
                <el-card style="width: 500px">
                    <div slot="header" class="clearfix">
                        <span>小蒙哥带你做毕设2024</span>
                    </div>
                    <div>2024毕设正式开始
                        <div style="margin: 10px 0">
                            <strong>主题色</strong>
                        </div>
                    </div>

                </el-card>
            </el-main>


        </el-container>
    </el-container>


</template>

<script>
    export default {
        name: 'HomeView',
        data() {
            return {
                isCollapse: true,
                asideWith: '200px'
            }
        },
        methods: {
            handleCollapse() {
                this.isCollapse = !this.isCollapse
                this.asideWith = this.isCollapse ? '64px' : '200px'
            }
        }
    }
</script>


<style>
    .el-menu--inline .el-menu-item-group {
        background-color: #000c17 !important;
    }

    .el-menu-item:hover, .el-sub-menu__title:hover {
        color: #fff !important;
    }

    .el-menu-item.is-active {
        background-color: #40a9ff !important;
    }

    .el-header {
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
        display: flex;
        align-items: center;
    }
</style>

